<template>
  <div class="comment_emoji">
    <el-form ref="form">
      <el-input
        @focus="cancelShow"
        type="textarea"
        v-model="replyContent"
        placeholder="说说你的看法"
        class="commentTextarea"
      ></el-input>
    </el-form>
    <div class="emoji_tools">
      <div class="emoji_start">
        <div class="emojiSelect">
          <i
            class="iconfont"
            :class="!show ? 'icon-angry-face' : 'icon-squinting-face'"
            @click="toggleShow"
          ></i>
          <div class="emoji_container" v-show="show">
            <div class="emoji_box">
              <button
                class="emoji_item"
                v-for="(item, index) in emoji_list"
                :key="index"
                @click="addEmoji($event)"
              >
                {{ item }}
              </button>
            </div>
          </div>
        </div>
        <div class="emoji_pic">
          <i
            class="iconfont icon-tupian"
            @click="$win('您没有权限', 'error')"
          ></i>
        </div>
      </div>
      <div class="emoji_end">
        <button class="cancelReply" @click="cancelTextarea">
          取消{{ !$parent.issueComment ? "回复" : "评论" }}
        </button>
        <button class="submitReply" @click="submitComment(true)">提交</button>
      </div>
    </div>
  </div>
</template>

<script>
import { Picker } from "emoji-mart-vue"; //引入组件
import { mapState } from "vuex";
import dayjs from "dayjs";
import { remark, reply } from "@/api/comment";

export default {
  name: "MyEmoji",
  components: {
    Picker,
  },
  computed: {
    ...mapState("user", ["userInfo"]),
  },
  data() {
    return {
      show: false,
      replyContent: "",
      emoji_list: [
        "😁",
        "😊",
        "😎",
        "😤",
        "😥",
        "😂",
        "😍",
        "😏",
        "😙",
        "😟",
        "😖",
        "😜",
        "😱",
        "😲",
        "😭",
        "😚",
        "💀",
        "👻",
        "👍",
        "💪",
        "👊",
      ],
    };
  },
  methods: {
    // 表情
    addEmoji(e) {
      this.replyContent += e.target.innerHTML.trim();
    },
    // 切换表情显示
    toggleShow() {
      this.show = !this.show;
    },
    // 取消表情显示
    cancelShow() {
      this.show = false;
    },
    // 关闭输入框
    cancelTextarea() {
      this.clearParentData();
    },
    // 发布评论/回复
    submitComment() {
      let options = null;
      // 评论
      if (this.$parent.flag === null) {
        this.$parent.flag = 1;
      }
      if (this.$parent.flag) {
        options = {
          article_id: this.$parent.article_id,
          user_id: this?.userInfo?.user_id,
          profile: this?.userInfo?.profile,
          userName: this?.userInfo?.userName,
          talk: this.$emoji.utf16toEntities(this.replyContent.trim()),
          createTime: +dayjs(),
        };
        // 发起网络请求
        remark(options).then((res) => {
          if (res.code === 200) {
            // 插入进行数据
            this.$parent.targetPutContent(0, options);
            this.$win("评论成功");
            // 清空数据
            this.clearParentData();
            // 增加评论条数
            this.$parent.$parent.toolRequest("ping");
          }
        });
      } else {
        options = {
          article_id: this.$parent.article_id,
          comment_id:
            this.$parent.replyObj.comment_id || this.$parent.replyObj.id,
          user_id: this?.userInfo?.user_id,
          profile: this?.userInfo?.profile,
          userName: this?.userInfo?.userName,
          reply_id: this.$parent.replyObj.user_id,
          reply_name: this.$parent.replyObj.userName,
          talk: this.$emoji.utf16toEntities(this.replyContent.trim()),
          createTime: +dayjs(),
        };
        reply(options).then((res) => {
          if (res.code === 200) {
            this.$parent.targetPutContent(1, options);
            this.$win("回复成功");
            // 清空数据
            this.clearParentData();
          }
        });
      }
    },
    // 发布成功清空数据
    clearParentData() {
      this.show = false;
      this.$parent.issueComment = false;
      this.$parent.replyObj = {};
      this.$parent.targetEl = null;
      this.$parent.flag = null;
      // 清掉上一个内边距
      this.$parent.el?.classList.remove("paddingBottom0");
      this.$parent.el?.classList.remove("paddingBottom1");
      // 说的话清空
      this.replyContent = "";
      // 关闭输入框显示
      this.$parent.flag = null;
    },
  },
};
</script>

<style lang="less">
.comment_emoji {
  position: relative;
  margin-bottom: 100px;
  text-align: left;
  .commentTextarea {
    textarea {
      overflow: hidden;
      overflow-wrap: break-word;
      height: 100px !important;
      -webkit-appearance: none;
      outline: none;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      font-family: font-regular, "Helvetica Neue", sans-serif;
      border: 1px solid #ccc;
      box-sizing: border-box;
      border-radius: 6px;
      font-size: 14px;
      transition: box-shadow 0.3s;
      &:hover {
        box-shadow: 0 0 10px #dedede inset;
      }
    }
  }
  .emoji_tools {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
    align-items: center;
    .emoji_start {
      user-select: none;
      display: flex;
      .emojiSelect {
        cursor: url("@/assets/mouse/x2.cur"), auto !important;
        margin-right: 18px;
        i {
          font-size: 26px;
        }
        .emoji_container {
          width: 230px;
          position: absolute;
          width: 230px;
          height: 102px;
          top: 164px;
          left: -9px;
          padding: 2px;
          box-shadow: 0 2px 10px 2px rgb(0 0 0 / 11%);
          background-color: #fff;
          z-index: 2;
          .emoji_box {
            display: flex;
            align-items: center;
            justify-items: center;
            z-index: 3;
            flex-flow: wrap;
            &::before {
              content: "";
              position: absolute;
              border-style: solid;
              border-color: transparent transparent #c7c7c7;
              border-width: 7px;
              top: -14px;
              left: 15px;
              z-index: 1;
            }
            .emoji_item {
              width: 14.2857%;
              height: 33px;
              background: #f5f5f5;
              border: 1px solid #fff;
              font-size: 19px;
              line-height: 33px;
              padding: 0;
              transition: transform 0.3s;
              &:active {
                transform: translateY(4px);
              }
            }
          }
        }
      }
      .emoji_pic {
        cursor: url("@/assets/mouse/x2.cur"), auto !important;
        i {
          font-size: 26px;
          font-weight: 500;
        }
      }
    }
    .emoji_end {
      display: flex;
      button {
        border-radius: 4px;
        color: #fff;
        padding: 8px 16px;
        height: 34px;
        transition: opacity 0.2s;
        position: relative;
        font-size: 12px;
        margin: 0;
        white-space: nowrap;
        font-size: 12px;
        border: 0;
        background: none;
        font-family: "微软雅黑";
      }
      .cancelReply {
        &:hover {
          background: #f3f3f3;
        }
        margin-right: 16px;
        border-radius: 6px;
        color: #d0d0d0;
        padding: 0 6px;
      }
      .submitReply {
        background: #0dce9e;
        border: 1px solid #0dce9e;
        border-radius: 6px;
      }
    }
  }
}
</style>